<template>
	<el-row class="course-catalog-row">
		<el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="4" v-for="(o, index) in datas" :key="index" class="item">
			<div class="course-card-box">
				<div class="course-card-top">
					<img class="course-banner" :src="'/static/img/illustration/i00'+index+'.jpg'">
				</div>
				<div class="course-card-content">
					<h3>{{o.courseName}}</h3>
					<div class="bottom">
						<span class="bottom-text">{{o.classYear}}级&nbsp;{{o.className}}</span>
						<el-button type="text" class="button" @click="$router.push({path:'/cdetail?c='+o.courseId})">进入课程</el-button>
						<div class="clear"></div>
					</div>
				</div>
			</div>
		</el-col>
		<!--工具条-->
		<el-col v-if="isLoading" :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</el-row>
</template>

<script>
  import {getRelevancyList} from '../../api/api';

  export default {
    data() {
      return {
        schoolYear:'',
		semester:'',
		useeId:'',
        datas:[],
        total:'',
        page: 0,
		isLoading: false,
      };
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val;
        this.getData(this.userId,this.schoolYear,this.semester);
      },

      getData(val1,val2,val3) {
        console.log(val1+'\n'+val2+'\n'+val3);
        let para = {
          count: 16,
          pageNo: this.page,
          sortDirection: 'asc',
          sortField: ["name"],
          departmentId: '',
          specialtyId: '',
          classId: '',
          courseId: '',
          year: val2,
          teacherId: val1,
          semester: val3,
        };
        getRelevancyList(para).then((res) => {
          console.log(res);
          this.isLoading = true;
          this.total = res.data.data.totalPages;
          this.datas =  res.data.data.content;
        });
      },
    },
    mounted() {
      let newDate = new Date();
      let year = newDate.getFullYear();
      let val1 = year-1;
      let val2 = year+1;
      let schoolYear;
      let semester;
      let month = newDate.getMonth()+1;

      if(month >= 9){
        schoolYear = year+'-'+val2;
        semester = 1
      }else{
        schoolYear = val1+'-'+year;
        semester = 2
      }

      let user = sessionStorage.getItem('user');
      user = JSON.parse(user);

      this.userId = user.id;
      this.schoolYear = schoolYear;
      this.semester = semester;
      this.getData(user.id,schoolYear,semester);
    }
  }
</script>

<style lang="less">
	.grid-content{
		height: 100%;
		.content-wrapper{
			position: relative;
			min-height: calc(100% - 40px);
			.course-catalog-row{
				position: static;
				padding-bottom: 100px;
				.toolbar{
					position: absolute;
					bottom: 0;
					background-color: #d7dae0;
				}
			}
		}
	}
</style>